<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas</title>
    <style>
        .container {
            width: fit-content;
            margin: 50px auto;
        }
        #cs {
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="container">
        <canvas id="cs" width="400px" height="400px" ></canvas>
    </div>

    <script>
        var canvas = document.getElementById("cs");
        var ctx = canvas.getContext("2d");

        // ctx.fillRect(0, 0, 100, 50);

        // 右下
        // ctx.strokeRect(100, 50, 100, 50);

        //清除指定区域
        // ctx.clearRect(50, 25, 50, 25);

        // ctx.beginPath();
        //移动笔触到指定位置
        // ctx.moveTo(75, 50);
        //连接两个点
        // ctx.lineTo(100, 75);
        // ctx.lineTo(100, 25);
        // ctx.closePath();
        // ctx.stroke();
        // ctx.fill();

        // ctx.beginPath();
        // ctx.arc(100, 100, 50, 0, Math.PI/180 * 90);
        // ctx.stroke();

        // ctx.moveTo(180, 100);

        // ctx.beginPath();
        // ctx.arc(100, 100, 80, 0, 2*Math.PI);
        // ctx.stroke();

        //绘制一个四分之一圆(右下) 100, 100, 50
        ctx.beginPath();
        ctx.moveTo(100, 100);
        ctx.arc(100, 100, 50, 0, Math.PI/180 * 90);
        ctx.closePath();
        ctx.fill();

        //绘制一个四分之一圆(右上) 200, 200, 50
        ctx.beginPath();
        ctx.moveTo(200, 200);
        ctx.arc(200, 200, 50, Math.PI/180 * 270, 0);
        ctx.closePath();
        ctx.fill();
        // ctx.stroke();

    </script>
</body>
</html>